
<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 引入bootstrap -->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/font-awesome.min.css">
<!-- 引入JQuery  bootstrap.js-->
<script src="<%=request.getContextPath()%>/js/jquery-3.2.1.min.js"></script>
<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
<html>
<head>
    <title>题库遍历</title>
    <script type="text/javascript">

        //实现重置功能
        function  reset() {
            $("#title").val("");
        }

    </script>

    <script type="text/javascript">
        if('${message}'!=''){ alert('${message}');}

    </script>




</head>
<body>
<div class="container" >
    <h1 class="text-center">题库列表信息页面</h1>
    <hr/>
    <br/>

    <form class="form-inline" action="<%=basePath%>/question/findByPage" method="post">
        <div class="form-group">
            <label>题目：</label>
            <input type="text" class="form-control" name="title" id="title"/>
        </div>
        &nbsp;&nbsp;
        &nbsp;&nbsp;
        <div class="form-group">
            <label>题目类型：</label>
            <select name="question_type" panelHeight="auto" class="form-control" style="width:100px" >
                <option value="">全部</option>
                <option value="选择题">选择题</option>
                <option value="判断题">判断题</option>
                <option value="填空题">填空题</option>
            </select>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
            <input type="submit" value="查询" class="form-control btn btn-info"/>
            &nbsp;&nbsp;

            <input type="reset" value="重置" class="form-control btn btn-danger"/>
            &nbsp;&nbsp;
            <a href="javascript:void(0)" style="text-decoration: none;"
               data-toggle="modal" data-target="#leadTitle"><span class="btn btn-success">批量导入题目</span></a>
        </div>
    </form>

    <button onclick="del()" class="btn btn-danger">批量删除</button>
    <a href="<%=request.getContextPath()%>/question/findByPage"><span class="btn btn-success">刷新</span></a>
    <br/>
    <hr/>
    <div class="table-responsive">
        <table class="table table-hover table-striped">
            <thead>
            <tr>
                <th ><input id="all" type="checkbox" value=""/> </th>
                <th style="text-align: center;">编号</th>
                <th style="text-align: center;">题目</th>
                <th style="text-align: center;">题目类型</th>
                <th style="text-align: center;">知识</th>
                <th style="text-align: center;">知识领域</th>
                <th style="text-align: center;">选项A</th>
                <th style="text-align: center;">选项B</th>
                <th style="text-align: center;">选项C</th>
                <th style="text-align: center;">选项D</th>
                <th style="text-align: center;">正确答案</th>
                <th style="text-align: center;">答案解析</th>
                <th style="text-align: center;">操作</th>
            </tr>
            </thead>
            <tbody id="userData">
            <c:forEach items="${requestScope.page.beanList}" var="question">
                <tr class="text-center">
                    <td><input name="idd" id="sll" type="checkbox" value="${question.id}"/></td>
                    <td>${question.id}</td>
                    <td>${question.title}</td>
                    <td>${question.question_type}</td>
                    <td>${question.knowledge}</td>
                    <td>${question.intellectual_field}</td>
                    <td>${question.attrA}</td>
                    <td>${question.attrB}</td>
                    <td>${question.attrC}</td>
                    <td>${question.attrD}</td>
                    <td>${question.answer}</td>
                    <td>${question.analysis}</td>
                    <td><!--编辑用户按钮-->
                        <a href="javascript:void(0)" onclick="return edit(${question.id})" style="text-decoration: none;" >

                            <span class="glyphicon glyphicon-pencil"></span>
                        </a>
                        <!--删除用户按钮-->
                        <a href="javascript:void(0)" onclick="return trash(${question.id})" style="text-decoration: none;"
                           data-toggle="modal" data-target="#trashModal">
                            <span class="glyphicon glyphicon-trash"></span>
                        </a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
    <form class="listForm" method="post" action="<%=basePath%>/question/findByPage">
        <div class="row">
            <div class="form-inline">
                <label style="font-size:14px;margin-top:22px;">
                    <strong>共<b>${requestScope.page.totalCount}</b>条记录，共<b>${requestScope.page.totalPage}</b>页</strong>
                    &nbsp;
                    &nbsp;
                    <strong>每页显示</strong>

                    <select class="form-control" name="pageSize">
                        <option value="4"
                                <c:if test="${requestScope.page.pageSize == 4}">selected</c:if> >4
                        </option>
                        <option value="5"
                                <c:if test="${requestScope.page.pageSize == 5}">selected</c:if> >5
                        </option>
                        <option value="6"
                                <c:if test="${requestScope.page.pageSize == 6}">selected</c:if> >6
                        </option>
                        <option value="7"
                                <c:if test="${requestScope.page.pageSize == 7}">selected</c:if> >7
                        </option>
                    </select>
                    <strong>条</strong>
                    &nbsp;
                    &nbsp;
                    <strong>到第</strong>&nbsp;<input type="text" size="3" id="page" name="pageCode"
                                                    class="form-control input-sm"
                                                    style="width:11%"/>&nbsp;<strong>页</strong>
                    &nbsp;
                    <button type="submit" class="btn btn-sm btn-info">搜索</button>
                </label>

                <ul class="pagination" style="float:right;">
                    <li>
                        <a href="<%=basePath%>/question/findByPage?pageCode=1"><strong>首页</strong></a>
                    </li>
                    <li>
                        <c:if test="${requestScope.page.pageCode > 2}">
                            <a href="<%=basePath%>/question/findByPage?pageCode=${requestScope.page.pageCode - 1}">&laquo;</a>
                        </c:if>
                    </li>
                    <!-- 写关于分页页码的逻辑 -->
                    <c:choose>
                        <c:when test="${requestScope.page.totalPage <= 5}">
                            <c:set var="begin" value="1"/>
                            <c:set var="end" value="${requestScope.page.totalPage}"/>
                        </c:when>
                        <c:otherwise>
                            <c:set var="begin" value="${requestScope.page.pageCode - 1}"/>
                            <c:set var="end" value="${requestScope.page.pageCode + 3}"/>
                            <!-- 头溢出 -->
                            <c:if test="${begin < 1}">
                                <c:set var="begin" value="1"/>
                                <c:set var="end" value="5"/>
                            </c:if>
                            <!-- 尾溢出 -->
                            <c:if test="${end > requestScope.page.totalPage}">
                                <c:set var="begin" value="${requestScope.page.totalPage -4}"/>
                                <c:set var="end" value="${requestScope.page.totalPage}"/>
                            </c:if>
                        </c:otherwise>
                    </c:choose>
                    <!-- 显示页码 -->
                    <c:forEach var="i" begin="${begin}" end="${end}">
                        <!-- 判断是否是当前页 -->
                        <c:if test="${i == requestScope.page.pageCode}">
                            <li class="active"><a href="javascript:void(0);">${i}</a></li>
                        </c:if>
                        <c:if test="${i != requestScope.page.pageCode}">
                            <li>
                                <a href="<%=basePath%>/question/findByPage?pageCode=${i}&pageSize=${requestScope.page.pageSize}">${i}</a>
                            </li>
                        </c:if>
                    </c:forEach>
                    <li>
                        <c:if test="${requestScope.page.pageCode < requestScope.page.totalPage}">
                            <a href="<%=basePath%>/question/findByPage?pageCode=${requestScope.page.pageCode + 1}">&raquo;</a>
                        </c:if>
                    </li>
                    <li>
                        <a href="<%=basePath%>/question/findByPage?pageCode=${requestScope.page.totalPage}"><strong>末页</strong></a>
                    </li>
                </ul>
            </div>
        </div>
    </form>



    <!-- 删除的模态框 -->
    <!--解决问题是将modal fade改为modal-->
    <div class="modal fade" id="trashModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模糊框头部 -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                    </button>
                    <h4 class="modal-title" >警告！</h4>
                </div>
                <!-- 模糊框主体 -->
                <div class="modal-body">
                    <strong>你确定要删除吗？</strong>
                </div>
                <!-- 模糊框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal" id="delSure">确定</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑的模态框 -->
<form class="form-horizontal" role="form" method="post" action="<%=basePath%>/question/updateQuestion"
      id="form_edit">
    <div class="modal fade" id="editModal" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">修改题目信息</h4>
                </div>
                <div class="modal-body" style="margin-left: 80px;">
                        <table>
                            <input name="id" id="id" hidden="hidden"/>
                            <tr><td >题目：</td><td><input type="text" name="title" class="form-control" id="title1"/></td></tr>
                            <tr><td>题目类型：</td><td><input type="text" name="question_type" class="form-control" id="question_type1"/></td></tr>
                            <tr><td>知识：</td><td><input type="text" name="knowledge" class="form-control" id="knowledge1"/></td></tr>
                            <tr><td>知识领域：</td><td><input type="text" name="intellectual_field" class="form-control" id="intellectual_field1"/></td></tr>
                            <tr><td>选项A：</td><td><input type="text" name="attrA" class="form-control" id="attrA1"/></td></tr>
                            <tr><td>选项B：</td><td><input type="text" name="attrB" class="form-control" id="attrB1"/></td></tr>
                            <tr><td>选项C：</td><td><input type="text" name="attrC" class="form-control" id="attrC1"/></td></tr>
                            <tr><td>选项D：</td><td><input type="text" name="attrD" class="form-control" id="attrD1"/></td></tr>
                            <tr><td>正确答案：</td><td><input type="text" name="answer" class="form-control" id="answer1"/></td></tr>
                            <tr><td>答案解析：</td><td><input type="text" name="analysis" class="form-control" id="analysis1"/></td></tr>
                        </table>
                    <div class="modal-footer">
                        <button type="button" class="editSure btn btn-info" data-dismiss="modal">提交</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                </div>


            </div>
        </div>
    </div>

</form>

        <!-- 批量导入题目的模态框 -->
        <div class="modal fade" id="leadTitle">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- 模糊框头部 -->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                        </button>
                        <h4 class="modal-title" >选择文件导入题目</h4>
                    </div>
                    <!-- 模糊框主体 -->
                    <div class="modal-body">
                        <table>
                            <tr>
                                <td><input type="file" id="upload" name="upload" value="" /></td>
                            </tr></table>
                    </div>
                    <!-- 模糊框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" data-dismiss="modal" id="delSure1" onclick="uploadFile()">确定</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>


</div>

</body>

<script type="text/javascript">
    // 删除信息的方法
    function trash(id) {
        if (!id) {
            alert("error");
        } else {
            $("#delSure").click(function () {
                $.ajax({
                    url: "<%=request.getContextPath()%>/question/deleteQuestion?id="+id,
                    type: 'POST',
                    success: function (data) {
                        $("body").html(data);
                    }
                });
            });
        }
    }

</script>

</body>
<script type="text/javascript">
    //批量删除的部分
    //全选
    var oall=document.getElementById("all");
    var oid=document.getElementsByName("idd");
    oall.onclick=function(){//勾选全选时
        for(var i=0;i<oid.length;i++){
            //所有的选择框和全选一致
            oid[i].checked=oall.checked;
        }
    };
    //点击复选框
    for(var i=0;i<oid.length;i++){
        oid[i].onclick=function(){
            //判断是否全部选中,遍历集合
            for(var j=0;j<oid.length;j++){
                if(oid[j].checked==false){
                    oall.checked=false;
                    break;
                }else{
                    oall.checked=true;
                }
            }
        };
    }
    /*封面图-批量删除*/
    function del(){
        var r=confirm("是否确认删除所选的记录?");
        if(r==true){
            //确认删除
            var ids="";
            var n=0;
            for(var i=0;i<oid.length;i++){
                if(oid[i].checked==true){//选中为true
                    var id=oid[i].value;
                    if(n==0){
                        ids+="ids="+id;
                    }else{
                        ids+="&ids="+id;
                    }
                    n++;
                }
            }
            //上面会拼接出一个名为ids的数组ids=1&ids=2&ids=3&ids=4……
            $.get("<%=request.getContextPath()%>/question/deleteByIds",ids,function(data){

                if(data=="ok"){
                    //删除成功后，调用action方法刷新页面信息
                    location.reload();
                    $("input[name=id]").removeAttr("checked");
                    alert("批量删除题目成功!");
                }else{
                    alert("请至少选择条信息删除!");
                }
            });
            return true;
        }
        else{
            //不删除
            return false;
        }
    }

    // 编辑信息的方法
    function edit(id) {
        if (!id) {
            alert("error");
        } else {
            // 先去查询数据
            $.ajax({
                url: '<%=basePath%>/question/findById',
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify({
                    id: id
                }),
                success: function (data) {
                    $("#id").val(data.id);
                    $("#title1").val(data.title);
                    $("#question_type1").val(data.question_type);
                    $("#knowledge1").val(data.knowledge);
                    $("#intellectual_field1").val(data.intellectual_field);
                    $("#attrA1").val(data.attrA);
                    $("#attrB1").val(data.attrB);
                    $("#attrC1").val(data.attrC);
                    $("#attrD1").val(data.attrD);
                    $("#answer1").val(data.answer);
                    $("#analysis1").val(data.analysis);

                    $("#editModal").modal('show');

                },error: function () {
                    alert("错误");
                }

            });
        }
    }
    //提交修改表单的方法
    $(".editSure").click(function () {
        var edit=confirm("是否确认修改该题目信息?");
        if(edit==true)
        { $("#form_edit").submit();}
        else {
            return false;
        }
    });

//批量导入题目
    function uploadFile() {
        var file = $("#upload").val();
        file = file.substring(file.lastIndexOf('.'), file.length);
        if (file == '') {
            alert("上传文件不能为空！");
        } else if (file != '.xlsx' && file != '.xls') {
            alert("请选择正确的excel类型文件！");
        } else {
             ajaxFileUpload();
        }

    }
    function ajaxFileUpload() {
        var formData = new FormData();
        var name = $("#upload").val();
        formData.append("file", $("#upload")[0].files[0]);
        formData.append("name", name);
        $.ajax({
            url : "<%=request.getContextPath()%>/excel/InputExcel.do",
            type : "POST",
            async : false,
            data : formData,
            processData : false,
            contentType : false,
            beforeSend : function() {
                console.log("正在进行，请稍候");
            },
            success : function(data) {
                if (data == "success") {
                    alert("批量导入题目成功！！");
                } else {
                    alert("导入失败，请从新导入！！");
                }
            }
        });
    }




</script>
</html>